<!--  -->
<template>
  <div class="operate-watermark">
    <el-form :model="form" v-loading="loading">
      <el-form-item label="水印类型：" :label-width="formLabelWidth">
        <el-radio v-model="form.type" :label="1">文字</el-radio>
        <el-radio v-model="form.type" :label="2">图片</el-radio>
      </el-form-item>
      <!-- 文字显示 -->
      <div v-if="form.type === 1">
        <el-form-item label="水印文字：" :label-width="formLabelWidth" class="requireStar">
          <el-input v-model="form.text" size="medium" placeholder="请输入水印文字" maxlength="50" style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="字体：" :label-width="formLabelWidth">
          <el-select size="medium" v-model="form.font" placeholder="请选择" style="width:300px;">
            <el-option v-for="(item, index) in fontFamily" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字号：" :label-width="formLabelWidth">
          <el-select size="medium" v-model="form.fontsize" placeholder="请选择" style="width:300px;">
            <el-option :label="'12px'" :value="12"></el-option>
            <el-option :label="'14px'" :value="14"></el-option>
            <el-option :label="'16px'" :value="16"></el-option>
            <el-option :label="'18px'" :value="18"></el-option>
            <el-option :label="'20px'" :value="20"></el-option>
            <el-option :label="'22px'" :value="22"></el-option>
            <el-option :label="'28px'" :value="28"></el-option>
            <el-option :label="'32px'" :value="32"></el-option>
            <el-option :label="'36px'" :value="36"></el-option>
            <el-option :label="'42px'" :value="42"></el-option>
            <el-option :label="'48px'" :value="48"></el-option>
            <el-option :label="'52px'" :value="52"></el-option>
            <el-option :label="'64px'" :value="64"></el-option>
            <el-option :label="'72px'" :value="72"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="加粗：" :label-width="formLabelWidth">
          <el-radio v-model="form.bold" size="small" :label="0">不加粗</el-radio>
          <el-radio v-model="form.bold" size="small" :label="1">加粗</el-radio>
        </el-form-item>
        <el-form-item label="颜色：" :label-width="formLabelWidth" style="margin-bottom:0;">
          <el-color-picker v-model="form.color"></el-color-picker>
        </el-form-item>
      </div>
      <!-- 图片显示 -->
      <div v-if="form.type === 2">
        <el-form-item label="水印图片：" :label-width="formLabelWidth" class="requireStar">
          <el-button type="primary" @click.stop="chooseImage" size="medium">上传水印图片</el-button>
          <div>
          <div class="img-box-u">
            <el-image class="image-size-limit"
              :src="waterImgsrc">
              <div slot="error" class="image-slot">
                <span style="color:#656565;">图片不存在...</span>
              </div>
            </el-image>
            <div class="delete-u" v-if="waterImgsrc"><i @click.stop="deleteImage" class="el-icon-delete"></i></div>
          </div>
        </div>
        </el-form-item>
        <el-form-item label="水印大小：" :label-width="formLabelWidth" style="margin-bottom:5px;">
          <el-slider v-model="form.size" :show-tooltip="false" style="width:300px; display:inline-block;"></el-slider>
          <span class="sdr-span">{{form.size}} %</span>
        </el-form-item>
      </div>
      <el-form-item label="不透明度：" :label-width="formLabelWidth" style="margin-bottom:5px;">
        <el-slider v-model="form.opacity" :show-tooltip="false" style="width:300px; display:inline-block;"></el-slider>
        <span class="sdr-span">{{form.opacity}} %</span>
      </el-form-item>
      <el-form-item label="水印位置：" :label-width="formLabelWidth" >
        <div class="icon-type-list">
          <ul class="clearfix">
            <li v-for="pos in 9" :key="pos" :class="{selected: form.area === pos}"
              @click="choosePosition(pos)">
              <div class="item">
                <div class="icon"><i :class="['icon-type', 'icon-type' + pos]"></i></div>
              </div>
            </li>
          </ul>
        </div>
      </el-form-item>
      <el-form-item label="" :label-width="formLabelWidth">
        <el-button type="primary" @click="onSubmitData" size="medium">保存并预览</el-button>
        <!-- <el-button type="primary" @click="onpreview" size="medium">预览水印效果</el-button> -->
      </el-form-item>
    </el-form>
    <!-- 选择图片 -->
    <ChooseRepertory ref="chooseImage" />
    <!-- 水印效果预览 -->
    <el-dialog title="水印效果预览" :visible.sync="dialogShow" @close="close" width="600px">
      <div class="preview-u">
         <div class="item">
          原图：
          <div class="img"><img :src="preview.img"/></div>
         </div>
         <div class="item">
          水印效果：
          <div class="img"><img :src="preview.watermark"/></div>
         </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as functions from '@/core/functions.js'
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
import _ from 'lodash'
export default {
  created () {
    this.show()
  },
  computed: {
  },
  data () {
    return {
      loading: true,
      dialogShow: false,
      formLabelWidth: '120px',
      fontFamily: [
        { value: '宋体,SimSun', label: '宋体' },
        { value: '楷体,楷体_GB2312,SimKai', label: '楷体' },
        { value: '黑体,SimHei', label: '黑体' },
        { value: '隶书,SimLi', label: '隶书' },
        { value: 'andale mono', label: 'Andale Mono' },
        { value: 'arial,helvetica,sans-serif', label: 'Arial' },
        { value: 'arial black,avant garde', label: 'Arial Black' },
        { value: 'comic sans ms', label: 'Comic Sans Ms' },
        { value: 'impact,chicago', label: 'Impact,chicago' },
        { value: 'times new roman', label: 'Times New Roman' }
      ],
      // 水印设置项
      form: {
        type: 1,
        text: '',
        repertoryId: 0,
        font: '',
        color: '',
        fontsize: '',
        bold: 0,
        opacity: 0,
        area: 1,
        size: 100
      },
      // 水印图片
      waterImgsrc: '',
      hrepertory: {},
      // 水印预览
      preview: {
        img: '',
        watermark: ''
      }
    }
  },
  methods: {
    show () {
      this.loading = true
      this.$post('/watermark/info', null).then(response => {
        if (response && response.hwatermark) {
          this.form = initform(response.hwatermark)
        }
        if (response && response.hrepertory) {
          this.waterImgsrc = functions.getRepertoryImageSrcByHostRepertory(response.hrepertory)
        }
        this.loading = false
      })
    },
    chooseImage () {
      this.$refs['chooseImage'].show({ title: '选择水印图片', where: { type: [0] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          repertoryList.map(item => {
            let repertoryImageSrc = { hostId: this.$store.state.host.id, repertoryId: item.id, suffix: item.suffix, type: item.type, link: item.link }
            this.waterImgsrc = functions.getRepertoryImageSrc(repertoryImageSrc)
            this.form.repertoryId = item.id
            this.hrepertory = _.cloneDeep(item)
          })
        }
      })
    },
    deleteImage () {
      this.waterImgsrc = ''
      this.form.repertoryId = 0
      this.hrepertory = {}
    },
    choosePosition (pos) {
      if (pos === this.form.area) {
        return
      }
      this.form.area = pos
    },
    // 请求后台
    onSubmitData () {
      this.loading = true
      if (this.form.type === 2 && parseInt(this.form.repertoryId) === 0) {
        this.$message.error('图片logo不能为空！')
        this.loading = false
        return
      }
      if (this.form.type === 1 && (this.form.text === '' || this.form.text.trim() === '')) {
        this.$message.error('文字logo不能为空！')
        this.loading = false
        return
      }
      this.$jpost('/watermark/info-save', this.form).then(response => {
        if (response && response.hwatermark) {
          this.form = initform(response.hwatermark)
          if (response && response.hrepertory) {
            this.waterImgsrc = functions.getRepertoryImageSrcByHostRepertory(response.hrepertory)
          }
          this.onpreview()
          this.loading = false
        }
      })
    },
    // 预览水印效果
    onpreview () {
      this.$post('/watermark/test-mark', null).then(response => {
        if (response) {
          this.preview = response
          this.dialogShow = true
        }
      })
    },
    close () {
      this.preview = {
        img: '',
        watermark: ''
      }
      this.dialogShow = false
    }
  },
  components: {
    ChooseRepertory
  }
}
function initform (response) {
  let newForm
  newForm = {
    type: response.type ? response.type : 1,
    text: response.text ? response.text : '',
    repertoryId: response.repertoryId ? response.repertoryId : 0,
    font: response.font ? response.font : '',
    color: response.color ? response.color : '',
    fontsize: response.fontsize ? response.fontsize : '',
    bold: response.bold ? response.bold : 0,
    opacity: response.opacity ? response.opacity : 0,
    area: response.area ? response.area : 1,
    size: response.size ? response.size : 100
  }
  return newForm
}
</script>

<style scoped lang="scss">
.operate-watermark .el-form-item{
  margin-bottom: 15px;
}
.sdr-span{
  margin-left: 15px;
  vertical-align: top;
}
.img-box-u{
  display: inline-block;
  position: relative;
  margin-top:10px;
  .image-size-limit /deep/ img{
    max-height: 120px;
    max-width: 250px;
  }
  .delete-u{
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    background: #409EFF;
    color: #fff;
    text-align: right;
    font-size: 16px;
    padding: 0 6px;
    opacity: 0;
    cursor: pointer;
    line-height: 1.8;
  }
  &:hover .delete-u{
    opacity: 1;
  }
}
.icon-type-list {
  ul {
    list-style: none;
  }
  li {
    float: left;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    .icon-type {
      background: url(~@/assets/images/watermark-type.png) no-repeat center;
      display: inline-block;
      *display: inline;
      *zoom: 1;
      vertical-align: middle;
      width: 84px;
      height: 58px;
    }
    .icon-type1 {
      background-position: -1px 0;
    }
    .icon-type2 {
      background-position: -105px 0;
    }
    .icon-type3 {
      background-position: -210px 0;
    }
    .icon-type4 {
      background-position: -315px 0;
    }
    .icon-type5 {
      background-position: -420px 0;
    }
    .icon-type6 {
      background-position: -525px 0;
    }
    .icon-type7 {
      background-position: -630px 0;
    }
    .icon-type8 {
      background-position: -735px 0;
    }
    .icon-type9 {
      background-position: -840px 0;
    }
    &.selected .icon-type{
      background-image: url(~@/assets/images/watermark-type-selected.png);
    }
  }
}
.preview-u {
  text-align: center;
  .item{
    margin-bottom: 10px;
    .img{
      margin: 5px;
    }
    img{
      max-width: 100%;
      max-height: 300px;
    }
  }
}
</style>
